<template>
  <div class="schedule-list">
    <div class="scroll-container">
      <div v-if="agendaList && agendaList.length > 0" class="party-meeting-agenda">
        <div v-for="item in agendaList" :key="item.id" class="agenda-item" v-html="item.filePreview"></div>
      </div>
      <div v-else class="party-meeting-agenda">
        <div class="no-agenda">暂无会议议程</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'DataScreenLeft3',
})

interface AgendaItem {
  id: number
  activityId: string
  fileName: string
  filePreview: string
  fileUrl: string | null
  remark: string
  createdAt: string
  updatedAt: string
}

defineProps<{
  agendaList?: AgendaItem[]
}>()
</script>

<style lang="scss" scoped>
.schedule-list {
  height: 100%;
  width: 100%;
  padding: 10px;

  .scroll-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(115, 103, 240, 0.3);
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background-color: rgba(255, 255, 255, 0.05);
    }
  }

  .party-meeting-agenda {
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(115, 103, 240, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(115, 103, 240, 0.2);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(115, 103, 240, 0.5), transparent);
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(115, 103, 240, 0.5), transparent);
    }

    .agenda-item {
      font-size: 15px;
      line-height: 1.8;
      color: rgba(255, 255, 255, 0.9);
      white-space: pre-wrap;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      padding: 10px 0;

      :deep(p) {
        margin: 8px 0;
        color: rgba(255, 255, 255, 0.9);

        span {
          color: inherit !important;
        }
      }

      &:hover {
        background: rgba(115, 103, 240, 0.05);
      }
    }
  }

  .no-agenda {
    color: rgba(255, 255, 255, 0.5);
    padding: 30px 0;
    font-size: 16px;
    font-style: italic;
  }
}
</style>
